<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/web/js/jquery-3.3.1.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="${pageContext.request.contextPath}/web/js/bootstrap.min.js"></script>
    <script>
        function checkBook(){
            $.post({
                url:"${pageContext.request.contextPath}/book/checkBook",
                data:{"bookName":$("#bookName").val()},
                success:function(data){
                    if (data!==""){
                        $("#tipMessage").text(data);
                        //并将数据域置空
                        $("#bookName").val("");
                    }else {
                        $("#tipMessage").text(data);
                    }
                }
            })
        }
    </script>
</head>
<body>
<h4>增加一本书</h4>
<form action="${pageContext.request.contextPath}/book/addBook" method="post">
   书名: <input onblur="checkBook()" id="bookName" style="margin-bottom: 3px" name="bookName" type="text" required><span id="tipMessage" style="color: red;margin-left: 3px"></span><br>
   数量:  <input style="margin-bottom: 3px" name="bookCounts" type="text" required><br>
   详情: <input style="margin-bottom: 3px" name="detail" type="text" required><br>
    <input type="submit" style="margin-top: 10px">
    <a href="${pageContext.request.contextPath}/book/findBookByPage"> 返回主页</a>
</form>
</body>
</html>
